<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        table {
            width: 100%;
            margin-bottom: 15px;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            border: 1px solid #CBD6DE;
            padding-left: 10px;
            line-height: 28px;
        }

        th {
            text-align: left;
            background: linear-gradient(#edf2f5, #dce9f2, #edf2f5);
            color: #467aa7;
        }

        tbody tr:nth-child(4n), tbody tr:nth-child(4n-1) {
            background: #f2f2f2;
        }

        #pages {
            text-align: center;
            padding: 8px 0;
        }

        .page {
            min-width: 50px;
            display: inline-block;
        }

        .viewspotimg {
            width: 135px;
            height: 135px;
            margin-left: -10px;
            display: block;
            object-fit: cover;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="header">
            <div style="float: right;padding-top: 24px">
	            <span style="margin-right: 10px;">
	                 <script type="text/javascript">
	                   var date = new Date();
                       document.write("今天是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + " 星期" + "日一二三四五六".charAt(date.getDay()));
	                 </script>
	            </span>
                <a href="../login.html" style="color:#fff;float: right">安全退出</a>
            </div>
            <h1>旅游信息管理系统</h1>
        </div>
        <div id="header-bar"></div>
        <div id="content">
            <h2>景点列表</h2>
            <table v-for="place in places">
                <thead>
                <tr>
                    <th width="14%">ID</th>
                    <th width="20%">景点</th>
                    <th width="12%">印象图</th>
                    <th width="16%">旺季时间</th>
                    <th width="10%">旺季门票</th>
                    <th width="10%">淡季门票</th>
                    <th width="18%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td rowspan="2" v-text="place.id"></td>
                    <td rowspan="2" v-text="place.name"></td>
                    <td><img :src="'data:image/png;base64,'+place.picpath" class="viewspotimg"></td>
                    <td v-text="place.hottime">——</td>
                    <td v-text="place.hotticket">——</td>
                    <td v-text="place.dimticket">——</td>
                    <td style="text-align: center">
                        <a href="javascript:;" @click="deletePlace(place.id)">删除景点</a><br>
                        <a :href="'./updateviewspot.html?id='+place.id">修改景点</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <div style="height: 56px;font-size: 14px;line-height: normal">
                            <b style="color:#467aa7">简介：</b>
                            <span v-text="place.placeds"></span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <a href="./addviewspot.html">
                <button type="button">添加景点</button>
            </a>&emsp;
            <a href="../province/provincelist.html">返回省份列表</a>
            <div id="pages">
                <a href="javascript:;" @click="findAll(page-1)" v-if="page>1" class="page">&lt;上一页</a>

                <a href="javascript:;"  v-if="page==1" disabled="true" class="page">&lt;上一页</a>

                <a href="javascript:;" @click="findAll(index)" v-for="index in totalPages" class="page" v-text="index"></a>

                <a href="javascript:;" @click="findAll(page+1)" v-if="page<totalPages" class="page">下一页&gt;</a>

                <a href="javascript:;" v-if="page==totalPages" disabled="true" class="page">下一页&gt;</a>
            </div>
        </div>
        <div id="footer">
            ABC@126.com
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            places: [],
            page: "",
            totals: "",
            totalPage: "",
            provinceId: "",
        },
        methods: {
            findAll(index) {
                _this = this;
                if (index){
                    this.page = index;
                }
                axios.get("http://localhost:9090/place/list?page=" + this.page + "&provinceId=" + this.provinceId).then((res) => {
                    // console.log(res.data);
                    _this.places = res.data.place;
                    _this.page = res.data.page;
                    _this.totals = res.data.totals;
                    _this.totalPages = res.data.totalPages;
                })
            },
            deletePlace(id){
                axios.get("http://localhost:9090/place/delete?id="+id).then((res)=>{
                    if (res.data.statue){
                        alert(res.data.msg+"点击确定返回列表");
                        location.reload(true);
                    } else {
                        alert(res.data.msg);
                    }
                })
            }
        },
        created() {
            provinceId = location.href.substring(location.href.indexOf("=") + 1);
            this.provinceId = provinceId;
            this.findAll();
        }
    })
</script>
